<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<el-button type="text" icon="el-icon-plus" @click="editProduct">新建业主</el-button>
			</div>
			<el-row :gutter="20">
				<div style="margin:0 20px;">
					<el-form-item label="真实姓名" prop="userName">
						<el-input v-model="queryParams.userName" placeholder="请输入真实姓名" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="身份证号" prop="idcard">
						<el-input v-model="queryParams.idcard" placeholder="请输入身份证号" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="手机号码" prop="phonenumber">
						<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="房间编号" prop="unionId">
						<el-input v-model="queryParams.unionId" placeholder="请输入房间编号" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
				</div>
			</el-row>
		</el-form>
		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<el-table-column label="业主姓名" align="center" prop="userName" />
			<el-table-column label="身份证号" align="center" prop="idcard" width="150px" />
			<el-table-column label="手机号码" align="center" prop="phonenumber" />
			<el-table-column label="房间编号" align="center" prop="unionId" />
			<el-table-column label="性别" align="center" prop="sex">
			</el-table-column>
			<el-table-column label="帐号状态" align="center" prop="status">
			</el-table-column>
			<!-- <el-table-column label="租赁的商铺" align="center" prop="rentedCount" /> -->
			<el-table-column label="房间数量" align="center" prop="houseCount" />
			<el-table-column label="紧急人联系方式" align="center" prop="ecp" />
			<el-table-column label="备注" align="center" prop="remark" />
			<el-table-column label="操作" align="center" width="250" fixed="right">
				<template slot-scope="scope">
					<div class="centered-content">
						<el-button type="text" size="mini" class="editBtn" @click="editProduct(scope.row)">
							编辑
						</el-button>
						<el-button type="text" size="mini" class="deleteBtn" @click="delProduct(scope.row)">
							删除
						</el-button>
						<el-button type="text" size="mini" class="detailBtn" @click="lookProduct(scope.row)">
							详情
						</el-button>
						<el-button type="text" size="mini" class="detailBtn" @click="editingHouseProduct(scope.row.id)">
							过滤功能
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 楼维护弹窗 -->
		<el-dialog title="业主维护" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
			width="30%">
			<el-form ref="form" :model="dataForm" :rules="rules" label-width="120px" :disabled="canEdit">
				<!-- <el-form-item label="房间" prop="house">
					<el-select v-model="dataForm.house" filterable >
						<el-option v-for="item in houses" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="业主姓名" prop="userName">
					<el-input v-model="dataForm.userName" placeholder="请输入业主姓名" :maxlength="30" show-word-limit />
				</el-form-item>
				<el-form-item label="身份证号" prop="idcard">
					<el-input v-model="dataForm.idcard" placeholder="请输入身份证号" :maxlength="18" show-word-limit />
				</el-form-item>
				<el-form-item label="手机号码" prop="phonenumber">
					<el-input v-model="dataForm.phonenumber" placeholder="请输入手机号码" :maxlength="55" show-word-limit />
				</el-form-item>
				<el-form-item label="房间编号" prop="unionId">
					<el-input v-model="dataForm.unionId" placeholder="请输入房间编号" :maxlength="11" show-word-limit />
				</el-form-item>
				<el-form-item label="紧急人联系方式" prop="ecp">
					<el-input v-model="dataForm.ecp" placeholder="请输入紧急人联系方式" :maxlength="11" show-word-limit />
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="dataForm.sex" placeholder="请选择性别">
						<el-option label="男" value="男"></el-option>
						<el-option label="女" value="女"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="账号状态">
					<el-select v-model="dataForm.status" placeholder="请选择账号状态">
						<el-option label="停用" value="停用"></el-option>
						<el-option label="启用" value="启用"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="dataForm.remark" type="textarea" placeholder="请输入内容" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer" v-if="!canEdit">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 维护房屋关系 -->
		<el-dialog title="楼维护" :visible.sync="editingHouse" :close-on-click-modal="false" :close-on-press-escape="false"
			width="50%">
			<el-form ref="form" :model="dataForm" :rules="rules" label-width="80px">
				<el-row :gutter="20">
					<el-col :span="12">
						<div slot="header" class="clearfix">
							<span>已绑定房屋</span>
						</div>
						<el-table :data="alreadyHaveList" style="width: 100%" height="calc(100vh - 500px)">
							<el-table-column prop="houseName" align="center" label="房间名称" width="250px">
							</el-table-column>
							<el-table-column label="操作" align="center" fixed="right">
								<template slot-scope="scope">
									<el-button type="danger" plain size="mini" class="deleteBtn"
										@click="deleteHouse(scope.row)">
										删 除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
					<el-col :span="12">
						<div slot="header" class="clearfix">
							<span>未绑定房屋</span>
						</div>
						<el-table :data="haveNotList" style="width: 100%" height="calc(100vh - 500px)">
							<el-table-column prop="name" align="center" label="房间名称" width="250px">
							</el-table-column>
							<el-table-column label="操作" align="center" fixed="right">
								<template slot-scope="scope">
									<el-button type="success" plain size="mini" class="deleteBtn"
										@click="addHouse(scope.row)">
										添 加
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editingHouse = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 上传文件
	import {
		selectOwnerUserBlock,
		insertOwnerUserBlock,
		editOwnerUserBlock,
		deleteOwnerUserBlock,
		selectConfigHouseBlock,
		selectByOwnerIdBlock,
		insertOwnerHouseBlock,
		deleteOwnerHouseBlock
	} from '@/api/wuye.js'
	import fileUpdata from '@/api/file.config'
	export default {
		name: "product",
		// 页面数据
		data() {
			return {
				areaOptions: [],
				queryParams: {
					currentPage: 1,
					pageSize: 10,
					userName: null,
					idcard: null,
					phonenumber: null,
					ownCount: null,
				},
				rules: {
					// company: [
					//     {
					//         required: true,
					//         message: '请输入公司名',
					//         trigger: 'blur',
					//     },
					// ],
					userName: [{
						required: true,
						message: '请输入业主姓名',
						trigger: 'blur',
					}, ],
					unionId: [{
						required: true,
						message: '请输入房间编号',
						trigger: 'blur',
					}, ],
					// idcard: [{
					// 		required: true,
					// 		message: '请输入身份证号',
					// 		trigger: 'blur',
					// 	},
					// 	{
					// 		pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
					// 		message: '请输入正确的身份证号',
					// 		trigger: 'blur',
					// 	},
					// ],
					// sex: [{
					// 	required: true,
					// 	message: '请输入性别',
					// 	trigger: 'blur',
					// }, ],
					phonenumber: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur',
						},
						{
							pattern: /^1(3|4|5|7|8|9)\d{9}$/,
							message: '手机号格式错误',
							trigger: 'blur',
						},
					],
					remark: [

					],
				},
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				visible: false,
				canEdit: false,
				editingHouse: false,
				dataForm: {
					id: '',
					block: '',
					code: undefined,
					buildingSquare: undefined,
					useSquare: undefined,
					state: 'empty',
					floor: '',
					rentFee: '0',
					remark: undefined,
					buildingSelect: [],
					nameUnit: undefined,
					dateCheckIn: undefined,
					numPopulation: undefined,
					numOld: undefined,
					numPregnant: undefined,
					// house:undefined
				},
				stateOptions: [{
					fullName: '空置',
					id: 'empty'
				}],
				buildings: [],
				houses: [],
				// 已绑定房间列表
				alreadyHaveList: [],
				// 未绑定房间列表
				haveNotList: [],
				// 新增房间传值
				addParams: {
					ownerId: '',
					houseId: '',
					houseName: ''
				}
			};
		},
		// 初始化
		mounted() {
			this.getList();
			// this.getareaOptions();
		},
		// 函数集合
		methods: {
			handleChange(value) {
				this.dataForm.block = value[0];
				this.dataForm.building = value[1];
			},
			// getareaOptions() {
			// 	selectConfigHouseBlock().then(res => {
			// 		this.houses = res.rows;
			// 	});
			// },
			// 修改楼
			editProduct(row) {
				var type = "";
				this.canEdit = false;
				console.log('row.id',row)
				if (row.userName) {
					// 修改
					type = "edit";
					this.dataForm = row;
					console.log('row',row)
					console.log('this.dataForm',this.dataForm)
				} else {
					// 新增
					type = "add";
					this.dataForm = {};
				}
				this.visible = true;
			},
			// 维护房屋关系
			editingHouseProduct(id) {
				this.addParams.ownerId = id
				this.editingHouse = true
				this.binding()
				this.notBound()
			},
			// 已
			binding() {
				selectByOwnerIdBlock(this.addParams).then(res => {
					if (res.code == 200) {
						this.alreadyHaveList = res.rows
					}
				})
			},
			// 未
			notBound() {
				selectConfigHouseBlock().then(res => {
					if (res.code == 200) {
						this.haveNotList = res.rows
					}
				})
			},
			// 添加房屋
			addHouse(row) {
				this.addParams.houseId = row.id
				this.addParams.houseName = row.name
				console.log(this.addParams)
				insertOwnerHouseBlock(this.addParams).then(res => {
					if (res.code == 200) {
						console.log(res)
					}
				})
				this.binding()
			},
			// 删除房屋
			deleteHouse(row) {
				console.log('row', row)
				deleteOwnerHouseBlock(row).then(res => {
					if (res.code == 200) {
						console.log(res)
					}
				})
				this.binding()
			},
			// 查看楼详情
			lookProduct(row) {
				this.dataForm = row;
				this.canEdit = true;
				this.visible = true;
			},
			// 删除楼
			delProduct(row) {
				this.$confirm("是否删除？", "提示", {
						confirmButtonText: "确 认",
						cancelButtonText: "取 消"
					})
					.then(() => {
						deleteOwnerUserBlock({
							...row
						}).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success',
									duration: 1000,
									onClose: () => {
										this.visible = false;
										this.getList();
									},
								});
							}
						})
					})
					.catch(() => console.info("操作取消"));

			},
			//提交楼
			submitProduct() {
				this.$refs['form'].validate(valid => {
					if (valid) {
						if (this.dataForm.id) {
							editOwnerUserBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.visible = false;
											this.getList();
										},
									});
								}
							})
						} else {
							insertOwnerUserBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.visible = false;
											this.getList();
										},
									});
								}
							})
						}
					}
				})

			},
			//初始化列表
			getList() {
				this.loading = false;
				selectOwnerUserBlock({
					...this.queryParams
				}).then(res => {
					this.list = res.rows;
					this.total = res.total
				})
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					block: null,
					name: null,
					number: null,
				};
				this.resetForm('form');
			},

		}
	}
</script>
<style scoped lang='scss'>
	.centered-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>